// import {GuiProps, TextAlign} from "../model/GuiComponent";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {ConfigKey} from "../../../script/constant/ConfigConstant";
import {DataRouter} from "../../../script/frame/dataSource/DataRouter";
import {UIConfigKey} from "../../../script/constant/UIConfig";
import * as React from "../../../script/frame/apiModel/gui/React";
import {SyncId, UISyncData, View} from "../../../script/frame/apiModel/gui/React";
import {GuiId, GuiKeys} from "../../../script/controller/model/ControllerOpt";
import {PlayerModel} from "../../../script/frame/apiModel/adapterModel/model4/PlayerModel";
import {PlayerFactory} from "../../../script/frame/PlayerFactory";
import {LightButton} from "../component/LightButton";
import PercentBar from "../component/PercentBar";
import AttrShowBar from "../component/AttrShowBar";
import {AttributeEnum, AttrStrMap, UnitAttribute} from "../../../script/frame/dataSource/DataModel";
import {PetBarInterface, PetInfo} from "../../interface/GuiInterface";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {TextAlign} from "../../../script/frame/apiModel/adapter/adapterInterface/model1/IFrameAdapter";
import {DataRouterUtil} from "../../../script/utils/router/DataRouterUtil";
import {ColorStr} from "../../../script/type/Type";
import {CodeUtil} from "../../../script/frame/codeAdapter/CodeUtil";
import {publicGui} from "../../interface/PublicGui";

interface IProp {
    getPetInfoFun: (player: PlayerModel) => PetInfo[];
}
interface IState {
    petInfos: PetInfo[],
    selectIndex: number
}
export default class PetBar extends PetBarInterface<IProp, IState> {
    constructor(props) {
        super(props);
        this.state = {
            petInfos: [],
            selectIndex: 0,
            visible: false,
        }
    }


    render = () => {
        const backSize = { w: 0.50000, h: 0.49800 };
        const backPos = { l: 0.37500, t: 0.16600 };

        const paddingL = 0.03125
        const marginT = 0.04980
        const maxPetNum = Configer.getConfig(ConfigKey.maxPetNum);
        const fontSize = Configer.getUIConfig(UIConfigKey.fontSize);
        const infoPage = Configer.getResource(ResourceKey.petBoard);

        const petCallButton = Configer.getResource(ResourceKey.petCallButton);
        const petCallBackButton = Configer.getResource(ResourceKey.petCallBackButton);
        const petReleaseButton = Configer.getResource(ResourceKey.petReleaseButton);

        const lifeBar = Configer.getResource(ResourceKey.lifeBar);
        const lifeBarBack = Configer.getResource(ResourceKey.lifeBarBack);

        const magicBar = Configer.getResource(ResourceKey.magicBar);
        const magicBarBack = Configer.getResource(ResourceKey.lifeBarBack);


        const disableBlp = Configer.getResource(ResourceKey.disableBlp);

        const buttonBlp = Configer.getResource(ResourceKey.buttonBlp);

        const nullArt = disableBlp;


        const unitInfo = this.state.petInfos && this.state.petInfos[this.state.selectIndex];

        const id = unitInfo && unitInfo?.id;
        const unitData = DataRouter.getUnitDataByUnitId(id);

        let name = '暂无';

        if (unitData) {
            name = unitData.Name;
            if (unitInfo?.bVaild) {
                if (unitInfo?.bAlive) {
                } else {
                    name = `${name} (已死亡)`
                }
            }
        }
        // lvText = CodeUtil.getColorStr(ColorStr.yellow, lvText)

        let art = nullArt;
        let callPath = petCallButton;

        if (unitData) {
            art = DataRouterUtil.getIconUrlByIconData(unitData);
        }

        let maxLife = 0;
        let maxMagic = 0;
        let currentLife = 0;
        let currentMagic = 0;
        if (unitInfo?.bVaild) {
            const bBattle = unitInfo?.bBattle;
            if (bBattle) {
                callPath = petCallBackButton;
            }

            const attr = unitInfo?.attr;
            currentLife = attr[AttributeEnum.life];
            maxLife = attr[AttributeEnum.maxLife];

            currentMagic = attr[AttributeEnum.magic];
            maxMagic = attr[AttributeEnum.maxMagic];
        }

        const renderElement: PetInfo[] = [];

        for (let i = 0; i < maxPetNum; i ++) {
            const petInfo = this.state.petInfos[i];
            if (petInfo) {
                renderElement.push(petInfo);
            } else {
                renderElement.push({} as any)
            }
        }

        const closeIconSize: { w: number, h: number } = Configer.getUIConfig(UIConfigKey.closeIconSize);
        const closeIcon: string = Configer.getResource(ResourceKey.barCloseButton);


        const space = 0.00625

        const halfWidth = (backSize.w - (space + paddingL) * 2) / 2

        const attrPaddingL = 0.02
        const attrWidth = halfWidth - attrPaddingL * 2;

        const modelMarginL = halfWidth / 2 - 0.02500;
        const modelHeight = 0.06

        const textWidth = 0.02500
        const lifeWidth = halfWidth - textWidth;
        const lifeHeight = 0.03320;

        // const buttonMarginL = halfWidth / 2 - 0.02;
        const buttonH = 0.02490;
        const buttonW = 0.05625;

        let attr;
        if (unitInfo?.bVaild) {
            attr = unitInfo?.attr;
        }
        if (attr) {
        } else {
            attr = new UnitAttribute();
        }

        const attrStrArr = Configer.getUIConfig(UIConfigKey.petAttrStrMapArr) as AttrStrMap[];

        const halfHeight = 0.33200

        return <View   key={GuiKeys.petBar} style={{ hidden: !this.state.visible, backgroundImage: infoPage, width: backSize.w, height: backSize.h, left: backPos.l, top: backPos.t, paddingL }}>
            <View   key={GuiKeys.petBarLeft} style={{ width:  halfWidth, height: halfHeight, marginT: marginT }}>
                <View   key={GuiKeys.petBarName} style={{ width:  halfWidth, height: fontSize, fontAlign: TextAlign.center, color: ColorStr.black }}>{name}</View>
                <View   key={GuiKeys.petBarModel} style={{ backgroundImage: art, marginT: 0.01660,  width: 0.06, height: 0.09, marginL: modelMarginL }}></View>
                <View   key={GuiKeys.petBarItems} style={{ width:  halfWidth, height: halfHeight, marginT: 0.02158 }}>
                    {
                        renderElement.map(
                            (tempInfo, index, array) => {
                                let art = nullArt;
                                let mask = disableBlp;
                                if (tempInfo) {
                                    const id = tempInfo?.id;
                                    const tempData = DataRouter.getUnitDataByUnitId(id);
                                    if (tempData) {
                                        art = DataRouterUtil.getIconUrlByIconData(tempData);
                                    }
                                }
                                let fightPath = '';
                                if (tempInfo.bVaild) {
                                    const isFight = tempInfo.bBattle
                                    if (isFight) {
                                        fightPath = Configer.getResource(ResourceKey.fightPath);
                                    }
                                    if (tempInfo.bAlive) {
                                        mask = '';
                                    }
                                }
                                let borderWeight = { l: 0, t: 0 };

                                let back = art;

                                const margin = { t: 0.01162, l: 0.01250 };
                                const itemSize = { w: 0.03750, h: 0.04980 };

                                if (index === this.state.selectIndex) {
                                    borderWeight = { l: 0.00625, t: 0.00830 };

                                    itemSize.w = itemSize.w + 2 * borderWeight.l;
                                    itemSize.h = itemSize.h + 2 * borderWeight.t;

                                    margin.t = margin.t - borderWeight.t;
                                    margin.l = margin.l - borderWeight.l;
                                }
                                const rootMargin = { t: 0, l: 0 }
                                // if (index < rowLen) {
                                //     rootMargin.t = rootMargin.t + 0.02;
                                // }
                                const fightIconH = 0.01660;
                                const fightIconW = 0.01;

                                const lvH = 0.01660;
                                const lvW = 0.01875;

                                let tempResumeTime = 0;
                                let lvText = `0`;
                                if (tempInfo.bVaild) {
                                    tempResumeTime = tempInfo.resumeTime;
                                    lvText = `${tempInfo.lv}`;
                                }
                                const resumeFontSize = 0.02;
                                return <View   key={`${GuiKeys.petBarItem}|${index}`} style={{ width: 0.05000, height: 0.06640, marginT: rootMargin.t, marginL: rootMargin.l }}>
                                    {/*<View   key={`${GuiKeys.petBarFight}|${index}`} style={{ backgroundImage: fightPath, width: 0.01, height: 0.01, marginL: 0.01 }}></View>*/}
                                    <View   key={`${GuiKeys.petBarIcon}|${index}`} style={{ backgroundImage: back, mask, marginL: margin.l, marginT: margin.t, width: itemSize.w, height: itemSize.h }}>
                                        <View   key={`${GuiKeys.petBarIconFight}|${index}`} style={{ backgroundImage: fightPath, width: fightIconH * 1.5, height: fightIconH * 1.5, float: true }}></View>
                                        <View   key={`${GuiKeys.petBarIconResume}|${index}`} style={{ hidden: (tempResumeTime <= 0), width: itemSize.w, height: itemSize.h, float: true, fontSize: resumeFontSize, fontAlign: TextAlign.center }}>{tempResumeTime}</View>
                                        <View   key={`${GuiKeys.petBarIconLv}|${index}`} style={{ hidden: (lvText === '0') , fontAlign: TextAlign.center, backgroundImage: disableBlp ,fontSize: lvH, width: lvW, height: lvH, float: true, marginT: itemSize.h - lvH - 0.00166, marginL:  itemSize.w - lvW }}>{lvText}</View>
                                        <View   onMouseDown={() => { return this.onSelect(index) }} key={`${GuiKeys.petBarIconModel}|${index}`} style={{ width: itemSize.w, height: itemSize.h, marginT: rootMargin.t, marginL: rootMargin.l, float: true }}></View>
                                    </View>
                                </View>
                            }
                        )
                    }
                </View>
            </View>
            <View   key={GuiKeys.petBarRight} style={{ hidden: (!unitInfo?.bVaild), width:  halfWidth, height: halfHeight, marginL: space, marginT: marginT * 2 }}>
                <View   key={GuiKeys.petBarLife} style={{ width:  lifeHeight, height: lifeHeight }}>
                    <View   key={GuiKeys.petBarLifeText} style={{ width:  textWidth, height: textWidth, color: ColorStr.black }}>生命</View>
                    <PercentBar   key={`${GuiKeys.petLifePercentBar}`}  fontSize={fontSize} marginT={0.00498}  max={maxLife} current={currentLife} back={lifeBarBack} line={lifeBar} width={lifeWidth} height={lifeHeight} showPercent={false}></PercentBar>
                </View>
                <View   key={GuiKeys.petBarMagic} style={{ width:  halfWidth, height: lifeHeight, marginT: 0.01660 }}>
                    <View   key={GuiKeys.petBarMagicText} style={{ width:  textWidth, height: textWidth, color: ColorStr.black }}>魔法</View>
                    <PercentBar   key={`${GuiKeys.petMagicPercentBar}`}  fontSize={fontSize} marginT={0.00498}  max={maxMagic} current={currentMagic} back={magicBarBack} line={magicBar} width={lifeWidth} height={lifeHeight} showPercent={false}></PercentBar>
                </View>
                <View   key={GuiKeys.petBarAttr} style={{ width: halfWidth, backgroundImage: disableBlp, height: 0.16600, marginT: 0.01660, paddingT: 0.03320, paddingL: attrPaddingL }}>
                    <AttrShowBar   key={GuiKeys.petBarAttrContent} attr={attr} attrStrMaps={attrStrArr}  width={attrWidth} height={0.01660} attrSize={{ h: 0.016, w: 0.045 }} textAlign={TextAlign.before} ></AttrShowBar>
                </View>
                <View   key={GuiKeys.petBarButtons} style={{ width: halfWidth, height: buttonH, marginT: 0.01660 }}>
                    <LightButton   key={GuiKeys.petBarCall} onMouseDown={() => { return this.callBack() }} style={{ fontSize: buttonH, fontAlign: TextAlign.center, backgroundImage: callPath, marginL: 0.04375, width: buttonW, height: buttonH }}></LightButton>
                    <LightButton   key={GuiKeys.petBarRelease} onMouseDown={this.release} style={{ fontSize: buttonH, fontAlign: TextAlign.center, backgroundImage: petReleaseButton, marginL: 0.03750, width: buttonW, height: buttonH }}></LightButton>
                </View>
            </View>
            <View   onMouseDown={() => { return this.clickClose() } } key={GuiKeys.pageContentClose} style={{ float: true, backgroundImage: closeIcon, width: closeIconSize.w, height: closeIconSize.h, marginL: backSize.w - closeIconSize.w - paddingL }}></View>
        </View>
    }
    getVisible = (): boolean => {
        return this.state.visible;
    }
    onSelect = (index: number) => {
        this.setState({
            ...this.state,
            selectIndex: index,
        })
        const syncData: UISyncData = { id: SyncId.selectPet, param: { selectIndex: this.state.selectIndex } };
        return syncData;
    }

    callBack = () => {
        const syncData: UISyncData = { id: SyncId.callBack, param: { selectIndex: this.state.selectIndex } };
        return syncData;
    }
    release = () => {

        const tempIndex = this.state.selectIndex;
        const fun = () => {
            const syncData: UISyncData = { id: SyncId.release, param: { selectIndex: tempIndex } };
            return syncData;
        }
        const text = CodeUtil.getColorStr(ColorStr.black, `是否确认？`)
        publicGui.showDialogPage(0.11,  undefined, text, ResourceKey.petBoard, ResourceKey.dialogDeleteArchiveOk, ResourceKey.dialogDeleteArchiveCanel, fun, undefined);

    }

    showPetBar = () => {
        const petInfos = this.props.getPetInfoFun(PlayerFactory.getInstance().getLocalPlayer());

        this.setState({
            ...this.state,
            petInfos: petInfos,
            visible: true,
        })
    }
    clickClose = () => {
        const syncData: UISyncData = { id: SyncId.closeUI, param: { guiId: GuiId.petBar } };
        return syncData;
    }

    closePetBar = () => {
        this.setState({
            ...this.state,
            visible: false,
        })
    }

}